<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<!-- Load libraly for Genesis -->
    <script type="text/javascript" src="./Genesis/Common.js"></script>
    <script type="text/javascript" src="./Genesis/prototype-1.6.0.3.js"></script>
    
    <script type="text/javascript" src="./Genesis/Image.js"></script>
    <script type="text/javascript" src="./Genesis/Content.js"></script>
    <script type="text/javascript" src="./Genesis/Flash.js"></script>
    <script type="text/javascript" src="./Genesis/Music.js"></script>
    <script type="text/javascript" src="./Genesis/Movie.js"></script>
    
    <script type="text/javascript" src="./Genesis/AnimationObject.js"></script>
    <script type="text/javascript" src="./Genesis/AnimationContainer.js"></script>
    <script type="text/javascript" src="./Genesis/AnimationThread.js"></script>
    <script type="text/javascript" src="./Genesis/Genesis.js"></script>
    <!-- End Load libraly for Genesis -->
    
    <!-- <script type="text/javascript" src="./Options/toolbar.js"></script> -->
</head>
<body>
	<h5 id="debug">Debug tab</h5>
    
    <script type="text/javascript">
   		var default_width  = 75;
		var default_height = 75;
		var max_width      = 150;
		var max_height	   = 150;
		// max width  == 150 --> 200%
		// max height == 150 --> 200%
    
    	// Debug log
    	//var debug = document.getElementById('debug');
    	//debug.update('debug message set');
    
    	// Before mouse over
    	var gen1 = new Genesis(100,100);
    	gen1.getDomObj().style.background = "#666666";
		gen1.setSize(600,150);
		
		// normal size 75,75 mouse over == 100,100
		var image0 = new BookImage("./image/icon_update.png",100,5);
		image0.setSize(75,75);
		
		var image1 = new BookImage("./image/icon_calendar.png",200,5);
		image1.setSize(75,75);
		
		var image2 = new BookImage("./image/icon_email.png",300,5);
		image2.setSize(75,75);
		
		var image3 = new BookImage("./image/icon_texteditor.png",400,5);
		image3.setSize(75,75);
		
		var image4 = new BookImage("./image/icon_users.png",500,5);
		image4.setSize(75,75);
		
		
        var table = new Element('table',{'id':'toolbareye','border':'0','width':'600px','style':'position:absolute;'});
        var tableBody = new Element('tbody',{});
        var tr	  = new Element('tr',{});
        tableBody.appendChild(tr);
        table.appendChild(tableBody);
		
		var tds	  = new Element('td',{'border':'0','align':'center','valign':'top','height':'150','width':'100'});
        tr.appendChild(tds);

		var td0	  = new Element('td',{'border':'0','align':'center','valign':'top','height':'150'});
        image0.getDomObj().style.position = '';
        td0.appendChild(image0.getDomObj()); 
        tr.appendChild(td0);
        
        var td1	  = new Element('td',{'border':'0','align':'center','valign':'top','height':'150'});
        image1.getDomObj().style.position = '';
        td1.appendChild(image1.getDomObj()); 
        tr.appendChild(td1);
        
        var td2	  = new Element('td',{'border':'0','align':'center','valign':'top','height':'150'});
        image2.getDomObj().style.position = '';
        td2.appendChild(image2.getDomObj()); 
        tr.appendChild(td2);
        
        var td3	  = new Element('td',{'border':'0','align':'center','valign':'top','height':'150'});
        image3.getDomObj().style.position = '';
        td3.appendChild(image3.getDomObj()); 
        tr.appendChild(td3);
        
        var td4	  = new Element('td',{'border':'0','align':'center','valign':'top','height':'150'});
        image4.getDomObj().style.position = '';
        td4.appendChild(image4.getDomObj()); 
        tr.appendChild(td4);
        
		var tde	  = new Element('td',{'border':'0','align':'center','valign':'top','height':'150','width':'100'});
        tr.appendChild(tde);        
        
        gen1.getDomObj().appendChild(table);
		
		// Mac toolbar script
		var toolbar_obj = new Array();
		toolbar_obj[0]  = image0;
		toolbar_obj[1]  = image1;
		toolbar_obj[2]  = image2;
		toolbar_obj[3]  = image3;
		toolbar_obj[4]  = image4;
		
		// Mouse Move from outside to inside the toolbar
		td0.onmousemove = function(e) {
			e = e ? e : window.event;
			var mouse_x = e.clientX;
			var mouse_y = e.clientY;
			
			// img0
			var img0_centerx = parseFloat(findPosX(toolbar_obj[0].getDomObj()) + (parseFloat(toolbar_obj[0].getDomObj().style.width) / 2));
			var diff0 = Math.abs(mouse_x - img0_centerx);
			var addsize0 = ((100 - (diff0*1.5)/3)*((max_width - default_width)/100));
			if(addsize0 < 0)
			{
				addsize0 = 0;
			}
			
			// img1
			var img1_centerx = parseFloat(findPosX(toolbar_obj[1].getDomObj()) + (parseFloat(toolbar_obj[1].getDomObj().style.width) / 2));
			var diff1 = Math.abs(mouse_x - img1_centerx);
			var addsize1 = ((100 - (diff1*1.5)/3)*((max_width - default_width)/100));
			if(addsize1 < 0)
			{
				addsize1 = 0;
			}
			
			toolbar_obj[0].setSize(default_width+addsize0,default_width+addsize0);
			toolbar_obj[1].setSize(default_width+addsize1,default_width+addsize1);
		}
		
		td1.onmousemove = function(e) {
			e = e ? e : window.event;
			var mouse_x = e.clientX;
			var mouse_y = e.clientY;
			
			// For firefox 3 
			// img0
			var img0_centerx = parseFloat(findPosX(toolbar_obj[0].getDomObj()) + (parseFloat(toolbar_obj[0].getDomObj().style.width) / 2));
			var diff0 = Math.abs(mouse_x - img0_centerx);
			var addsize0 = ((100 - (diff0*1.5)/3)*((max_width - default_width)/100));
			if(addsize0 < 0)
			{
				addsize0 = 0;
			}
			
			// img1
			var img1_centerx = parseFloat(findPosX(toolbar_obj[1].getDomObj()) + (parseFloat(toolbar_obj[1].getDomObj().style.width) / 2));
			var diff1 = Math.abs(mouse_x - img1_centerx);
			var addsize1 = ((100 - (diff1*1.5)/3)*((max_width - default_width)/100));
			if(addsize1 < 0)
			{
				addsize1 = 0;
			}
			
			// img2
			var img2_centerx = parseFloat(findPosX(toolbar_obj[2].getDomObj()) + (parseFloat(toolbar_obj[2].getDomObj().style.width) / 2));
			var diff2 = Math.abs(mouse_x - img2_centerx);
			var addsize2 = ((100 - (diff2*1.5)/3)*((max_width - default_width)/100));
			if(addsize2 < 0)
			{
				addsize2 = 0;
			}	
			toolbar_obj[0].setSize(default_width+addsize0,default_width+addsize0);
			toolbar_obj[1].setSize(default_width+addsize1,default_width+addsize1);
			toolbar_obj[2].setSize(default_width+addsize2,default_width+addsize2);
		}	
		td2.onmousemove = function(e) {
			e = e ? e : window.event;
			var mouse_x = e.clientX;
			var mouse_y = e.clientY;
			
			// For firefox 3 
			// img1
			var img1_centerx = parseFloat(findPosX(toolbar_obj[1].getDomObj()) + (parseFloat(toolbar_obj[1].getDomObj().style.width) / 2));
			var diff1 = Math.abs(mouse_x - img1_centerx);
			var addsize1 = ((100 - (diff1*1.5)/3)*((max_width - default_width)/100));
			if(addsize1 < 0)
			{
				addsize1 = 0;
			}
			
			// img2
			var img2_centerx = parseFloat(findPosX(toolbar_obj[2].getDomObj()) + (parseFloat(toolbar_obj[2].getDomObj().style.width) / 2));
			var diff2 = Math.abs(mouse_x - img2_centerx);
			var addsize2 = ((100 - (diff2*1.5)/3)*((max_width - default_width)/100));
			if(addsize2 < 0)
			{
				addsize2 = 0;
			}
			
			// img3
			var img3_centerx = parseFloat(findPosX(toolbar_obj[3].getDomObj()) + (parseFloat(toolbar_obj[3].getDomObj().style.width) / 2));
			var diff3 = Math.abs(mouse_x - img3_centerx);
			var addsize3 = ((100 - (diff3*1.5)/3)*((max_width - default_width)/100));
			if(addsize3 < 0)
			{
				addsize3 = 0;
			}
						
			toolbar_obj[1].setSize(default_width+addsize1,default_width+addsize1);
			toolbar_obj[2].setSize(default_width+addsize2,default_width+addsize2);
			toolbar_obj[3].setSize(default_width+addsize3,default_width+addsize3);
		}	
		td3.onmousemove = function(e) {
			e = e ? e : window.event;
			var mouse_x = e.clientX;
			var mouse_y = e.clientY;
			
			// For firefox 3 
			// img2
			var img2_centerx = parseFloat(findPosX(toolbar_obj[2].getDomObj()) + (parseFloat(toolbar_obj[2].getDomObj().style.width) / 2));
			var diff2 = Math.abs(mouse_x - img2_centerx);
			var addsize2 = ((100 - (diff2*1.5)/3)*((max_width - default_width)/100));
			if(addsize2 < 0)
			{
				addsize2 = 0;
			}
			
			// img3
			var img3_centerx = parseFloat(findPosX(toolbar_obj[3].getDomObj()) + (parseFloat(toolbar_obj[3].getDomObj().style.width) / 2));
			var diff3 = Math.abs(mouse_x - img3_centerx);
			var addsize3 = ((100 - (diff3*1.5)/3)*((max_width - default_width)/100));
			if(addsize3 < 0)
			{
				addsize3 = 0;
			}
			
			// img4
			var img4_centerx = parseFloat(findPosX(toolbar_obj[4].getDomObj()) + (parseFloat(toolbar_obj[4].getDomObj().style.width) / 2));
			var diff4 = Math.abs(mouse_x - img4_centerx);
			var addsize4 = ((100 - (diff4*1.5)/3)*((max_width - default_width)/100));
			if(addsize4 < 0)
			{
				addsize4 = 0;
			}
			
			toolbar_obj[2].setSize(default_width+addsize2,default_width+addsize2);
			toolbar_obj[3].setSize(default_width+addsize3,default_width+addsize3);
			toolbar_obj[4].setSize(default_width+addsize4,default_width+addsize4);
		}	
		td4.onmousemove = function(e) {
			e = e ? e : window.event;
			var mouse_x = e.clientX;
			var mouse_y = e.clientY;
			
			// For firefox 3 
			// img3
			var img3_centerx = parseFloat(findPosX(toolbar_obj[3].getDomObj()) + (parseFloat(toolbar_obj[3].getDomObj().style.width) / 2));
			var diff3 = Math.abs(mouse_x - img3_centerx);
			var addsize3 = ((100 - (diff3*1.5)/3)*((max_width - default_width)/100));
			if(addsize3 < 0)
			{
				addsize3 = 0;
			}
			
			// img4
			var img4_centerx = parseFloat(findPosX(toolbar_obj[4].getDomObj()) + (parseFloat(toolbar_obj[4].getDomObj().style.width) / 2));
			var diff4 = Math.abs(mouse_x - img4_centerx);
			var addsize4 = ((100 - (diff4*1.5)/3)*((max_width - default_width)/100));
			if(addsize4 < 0)
			{
				addsize4 = 0;
			}
			toolbar_obj[3].setSize(default_width+addsize3,default_width+addsize3);
			toolbar_obj[4].setSize(default_width+addsize4,default_width+addsize4);
		}		
		
		// Mousemove inside toolbar
		
		
		
		var gen1_dom = gen1.getDomObj();
		gen1_dom.onmouseout = function(e) {
			e = e ? e : window.event;
			var mouse_x = e.clientX;
			var mouse_y = e.clientY;
			if(mouse_x > parseFloat(gen1.getDomObj().style.left) && mouse_x < (parseFloat(gen1.getDomObj().style.left)+parseFloat(gen1.getDomObj().style.width))
			&& mouse_y > parseFloat(gen1.getDomObj().style.top)  && mouse_y < (parseFloat(gen1.getDomObj().style.top)+parseFloat(gen1.getDomObj().style.height)))
			{	
				return;
			}
			// resize to 75 * 75 (normal size)
			toolbar_obj[0].setSize(75,75);
			toolbar_obj[1].setSize(75,75);
			toolbar_obj[2].setSize(75,75);
			toolbar_obj[3].setSize(75,75);
			toolbar_obj[4].setSize(75,75);	
		}
    </script>
	
</body>
</html>